import React, { useState, useEffect } from 'react'
import { Button, Table, Modal, message, notification} from 'antd'
import API from '../../../util/api';
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined,UploadOutlined } from '@ant-design/icons'
const { confirm } = Modal
export default function NewsDraft(props) {
    const [dataSource, setdataSource] = useState([])

    const {username}  = JSON.parse(localStorage.getItem("token"))
    useEffect(() => {
        API.getDraft({author:username,auditState:'0',_expand:'category' }).then(res => {
            const list = res.data;
            setdataSource(list);
        })
    }, [username]);

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            align:'center',
            render: (id) => {
                return <b>{id}</b>
            }
        },
        {
            title: '新闻标题',
            align:'center',
            dataIndex: 'title'
        },
        {
            title: '作者',
            align:'center',
            dataIndex: 'author'
        },
        {
            title: '分类',
            align:'center',
            dataIndex: 'category',
            render:(category)=>{
                return category.title
            }
        },
        {
            title: "操作",
            align:'center',
            render: (item) => {
                return <div>
                    <Button danger shape="circle" icon={<DeleteOutlined />} onClick={() => confirmMethod(item)} />
                    
                    <Button shape="circle" icon={<EditOutlined />} onClick={()=>{
                        props.history.push(`/news-manage/update/${item.id}`)
                    }}/>

                    <Button type="primary" shape="circle" icon={<UploadOutlined />} onClick={ () => handleCheck(item.id)}/>
                </div>
            }
        }
    ];

    const handleCheck = (id) => {
        API.passDraft(id, {auditState:1}).then(res=>{
            // props.history.push('/audit-manage/list');
            notification.info({
                message: `通知`,
                description:
                  `您可以到${'审核列表'}中查看您的新闻`,
                placement:"topRight"
            });
        })
    }
    const confirmMethod = (item) => {
        confirm({
            title: '你确定要删除?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                deleteMethod(item);
            },
            onCancel() {

            },
        });

    }
    //删除
    const deleteMethod = (item) => {
        setdataSource(dataSource.filter(data => data.id !== item.id));
        API.delDraft(item.id).then(res => {
            if (res.status === 200) {
                message.success('删除成功');
            } else {
                message.error(res.statusText);
            }
        });
    }

    return (
        <div>
            <Table   dataSource={dataSource} 
                     columns={columns}
                     rowKey={item=>item.id}
                     bordered
                />
        </div>
    )
}
